<template>
	<view>
		<form @submit="submit">
			<view class="cu-form-group margin-top">
				<view class="title">头像</view>
				<view class="cu-avatar radius bg-gray lg margin-tb-sm"
					:style="'background-image:url('+formData.avatar+'?thumb=1);'" @click="changeAvatar" />
			</view>
			<view class="cu-form-group">
				<view class="title"><text class="text-red padding-right-xs">*</text>我的姓名：</view>
				<input placeholder="请输入您的姓名" name="realName" v-model="formData.realName" @blur="handleMatch"></input>
			</view>
			<view class="cu-form-group">
				<view class="title"><text class="text-red padding-right-xs">*</text>手机号码：</view>
				<input placeholder="请输入手机号码" name="phone" type="tel" v-model="formData.phone"></input>
			</view>
			<!-- 工作信息 -->
			<view class="cu-bar bg-white solid-bottom margin-top">
				<view class="action">
					<text class="cuIcon-title text-red"></text>工作信息
				</view>
			</view>
			<view class="cu-form-group">
				<view class="title"><text class="text-red padding-right-xs">*</text>工作单位：</view>
				<input placeholder="请输入您的工作单位" name="workCompany" v-model="formData.workCompany"></input>
			</view>
			<view class="cu-form-group">
				<view class="title"><text class="text-red padding-right-xs">*</text>工作地点：</view>
				<input placeholder="请输入您的工作地点" name="workPlace" v-model="formData.workPlace"></input>
			</view>
			<!-- <view class="cu-form-group">
				<view class="title"><text class="text-red padding-right-xs">*</text>所在区域：</view>
				<picker mode="multiSelector" :range="areaList" range-key="name" @change="workAreaChange"
					@columnchange="workAreaColumnChange" name="workArea" v-model="formData.workAreaDict">
					<view class="picker">{{formData.workAreaDict || '请选择'}} </view>
				</picker>
			</view> -->
			<view class="cu-form-group">
				<view class="title"><text class="text-red padding-right-xs">*</text>单位职务：</view>
				<input placeholder="请输入您的单位职务" name="workPosition" v-model="formData.workPosition"></input>
			</view>
			<!-- <view class="cu-form-group">
				<view class="title"><text class="text-red padding-right-xs">*</text>单位所属类别：</view>
				<picker name="workCategory" @change="workCategoryChange" v-model="formData.workCategory"
					:range="workCategoryList">
					<view class="picker">
						{{workCategoryIndex>-1?workCategoryList[workCategoryIndex]:'请选择'}}
					</view>
				</picker>
			</view> -->
			<view class="cu-form-group">
				<view class="title"><text class="text-red padding-right-xs">*</text>具体行业：</view>
				<input placeholder="请输入您的单位具体行业" name="workIndustry" v-model="formData.workIndustry"></input>
			</view>
			<view class="cu-bar bg-white solid-bottom margin-top">
				<view class="action">
					<text class="cuIcon-title text-red"></text>校友卡照片墙
				</view>
				<view class="action">
					{{formData.imgList.length}}/9
				</view>
			</view>
			<view class="cu-form-group">
				<view class="grid col-3 grid-square flex-sub margin-top">
					<view class="bg-img" v-for="(item,index) in formData.imgList" :key="index" @tap="ViewImage"
						:data-url="index">
						<image :src="item.previewUrl+'?thumb=1'" mode="aspectFill"></image>
						<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
							<text class='cuIcon-close'></text>
						</view>
					</view>
					<view class="solids" @tap="ChooseImage" v-if="formData.imgList.length<9">
						<text class='cuIcon-cameraadd'></text>
					</view>
				</view>
			</view>
			<!-- 操作按钮 -->
			<view class="padding flex flex-direction">
				<button class="cu-btn bg-red margin-tb-sm lg" form-type="submit">保存提交</button>
			</view>
		</form>
	</view>
</template>

<script>
	import {
		serviceUrl
	} from '@/common/config.js'
	import {
		card_info,
		card_edit
	} from '@/common/api/api.js'

	export default {
		computed() {

		},
		data() {
			return {
				formData: {
					avatar: "",
					imgList: []
				},
				isCard: false
			};
		},
		created() {
			
		},
		onLoad() {
			this.$nextTick(() => {
				this.getInfo()
			})
		},
		methods: {
			getInfo() {
				card_info().then(res => {
					this.formData = this.$s.res(res)
				})
			},
			changeAvatar() {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						const tempFilePaths = res.tempFilePaths;
						uni.uploadFile({
							url: serviceUrl + 'api/oss/upload',
							filePath: tempFilePaths[0],
							name: 'file',
							success: (uploadFileRes) => {
								if (uploadFileRes.statusCode === 200) {
									let result = JSON.parse(uploadFileRes.data).result
									this.formData.avatar = result.previewUrl
								}
							}
						});
					}
				});
			},
			ChooseImage() {
				if (this.formData.imgList.length < 9) {
					uni.chooseImage({
						count: 1,
						success: (res) => {
							const tempFilePaths = res.tempFilePaths;
							uni.uploadFile({
								url: serviceUrl + 'api/oss/upload',
								filePath: tempFilePaths[0],
								name: 'file',
								success: (uploadFileRes) => {
									if (uploadFileRes.statusCode === 200) {
										let result = JSON.parse(uploadFileRes.data).result
										this.formData.imgList = this.formData.imgList.concat(
											result)
									}
								}
							});
						}
					});
				}
			},
			ViewImage(e) {
				let urls = this.formData.imgList.map(item => item.previewUrl);
				uni.previewImage({
					urls: urls,
					current: e.currentTarget.dataset.url
				});
			},
			DelImg(e) {
				uni.showModal({
					title: '提示',
					content: '确定要删除这张图片吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							let img = this.formData.imgList[e.currentTarget.dataset.index]
							this.formData.imgList.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			},
			submit(e) {
				console.log("formData", this.formData)
				// var formdata = e.detail.value
				if (!this.formData.realName) {
					uni.showToast({
						icon: 'none',
						title: "姓名不能为空"
					})
					return
				}
				if (!this.formData.phone) {
					uni.showToast({
						icon: 'none',
						title: "手机号不能为空"
					})
					return
				}
				card_edit(this.formData).then(res => {
					if (this.$s.suc(res)) {
						uni.redirectTo({
							url: '@/pages/index'
						})
					}
				})
			},
		}
	}
</script>

<style>

</style>